<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/5/29
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>互动详情</title>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/common.css"/>
    <script src="${path}/static/taoshunda/share/js/jquery-1.11.3.min.js"></script>
    <style type="text/css">

        body {
            background: #f0eff7;
        }

        img {
            object-fit: cover;
        }

        #testWH {
            width: 0;
            height: 0;
        }

        #ret-content {
            padding-top: 15px;
            padding-bottom: 15px;
            color: #656565;
        }

        #nickName {
            color: #6b6b6b;
            padding-top: 3px;
        }

        #createTime {
            color: #606060;
        }

        #headPicture {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        #conment-cont {
            color: #777777;
            padding-top: 15px;
            margin-bottom: 60px;
        }

        .reply {
            clear: both;
            font-size: 12px;
            padding-left: 50px;
            line-height: 22px;
        }

        .reply span {
            color: blue;
        }

    </style>
</head>
<body>
<img id="testWH" src="http://www.taoshunda.com/images/${map.videoPic}" alt=""/>
<div class="public-background public-overflow public-border-bottom" style="padding-top:20px;padding-bottom:20px;">
    <div class="public-padding">
        <div class="public-left" style="width:15%;">
            <img id="headPicture"/>
        </div>
        <div class="public-right" style="width:85%;">
            <div id="nickName" class="public-font-eleven"></div>
            <div id="createTime" class="public-font-twelve"></div>
        </div>
        <div class="public-font-eleven" style="clear:both;">
            <p class="public-color-one" id="ret-content"></p>
        </div>
        <div id="video-cont" class="public-background">
            <video preload="load" controls="controls" id="video" style="object-fit:fill;width:100%; " poster=""
                   webkit-playsinline="true" playsinline="true"
                   src="">
            </video>
        </div>
        <div id="output"></div>
    </div>

</div>

<div class="public-background public-font-twelve" id="conment-cont">
    <div class="public-padding" id="comlength"></div>
    <div id="com-body"></div>
</div>

<div style="background: #FF6D13;line-height:50px;text-align: center;display: inline-block;position: fixed;bottom: 0;width: 100%;font-size: 16px; margin-top: 50px">
    <button style="width: 100%; line-height:50px;background: #FF6D13;" id="btn"
            location="
    'http://www.taoshunda.com/setup/user.html'
    "><a
            href="http://www.taoshunda.com/setup/user.html" id="link"
            style="color: #ffffff;">点击下载淘瞬达app，淘您所爱 一瞬即达</a>
    </button>
</div>
<script>

    function getRequestParameters(key) {
        var arr = (location.search || "").replace(/^\?/, '').split("&");
        var params = {};
        for (var i = 0; i < arr.length; i++) {
            var data = arr[i].split("=");
            if (data.length == 2) {
                params[data[0]] = data[1];
            }
        }
        return params[key] ? params[key] : '';
    }

    var checkFun = function (data) {
        // if (data.shareTypeEnum != 'INTERACTION') {
        //     // window.location.href = document.domain + '/taoshunda/idleGoods?id=' + data.address;
        //     // window.location.href = document.domain + '//taoshundainter/webView/waiterService?id=' + data.address;
        // } else {
        $('#ret-content').text(data.content);
        $('#nickName').html(data.nickName);
        $('#createTime').html(data.createTime);
        $('#headPicture').attr('src', 'http://www.taoshunda.com/images/' + data.headPicture);
        var img = '';
        if (data.enclosures.length > 0) {
            if (data.enclosures[0].enclosureType == 'VIDEO') {
                $('#video').attr({
                    poster: 'http://www.taoshunda.com/images/' + data.enclosures[1].url,
                    src: 'http://www.taoshunda.com/images/' + data.enclosures[0].url
                });
                $('#testWH').attr('src', 'http://www.taoshunda.com/images/' + data.enclosures[0].url);
                document.getElementById('testWH').onload = function () {
                    document.getElementById('video').height = this.naturalHeight * (window.screen.width - 30) / this.naturalWidth;
                }
            } else {

                if (data.enclosures[0].enclosureType == 'CAPTURE') {
                    $('#video').attr({
                        poster: 'http://www.taoshunda.com/images/' + data.enclosures[0].url,
                        src: 'http://www.taoshunda.com/images/' + data.enclosures[1].url
                    });
                    $('#testWH').attr('src', 'http://www.taoshunda.com/images/' + data.enclosures[1].url);
                    document.getElementById('testWH').onload = function () {
                        document.getElementById('video').height = this.naturalHeight * (window.screen.width - 30) / this.naturalWidth;
                    }
                } else {
                    $('#video').hide();
                    for (var i in data.enclosures) {
                        $('#testWH').attr('src', 'http://www.taoshunda.com/images/' + data.enclosures[i].url);
                        img += '<img src="http://www.taoshunda.com/images/' + data.enclosures[i].url + '" width="100%"/>';
                    }
                    $('#video-cont').html(img);
                }
            }
        } else {
            $('#video').hide();
        }
        document.getElementById("btn").onclick = function () {
            document.getElementById("link").click();
        }
        $('#comlength').html('评论(' + data.commentInfos.length + ')');
        var str = '';
        var tem = '',
            temStr = '',
            s = 0;
        for (i in data.commentInfos) {
            temStr = '';
            for (s in data.commentInfos[i].reply) {
                tem = data.commentInfos[i].reply[s];
                temStr += '<p class="reply"><span> ' + tem.replyNickName + ' </span> 回复 <span> ' + tem.receiveNickName + ' </span> ' + tem.content + ' </p>';
            }
            str += '<div class="public-background public-overflow public-border-bottom" style="padding-top:15px;padding-bottom:15px;">' +
                '<div style="clear:both;" class="public-padding">' +
                '<div class="public-left" style="width:15%;">' +
                '     <img src="http://www.taoshunda.com/images/' + data.commentInfos[i].headPicture + '" height="40" width="40" style="border-radius:1000px;"/>' +
                '</div>' +
                '<div class="public-right" style="width:85%;line-height:40px;">' +
                '      <div style="color: #6b6b6b;" class="public-font-eleven public-left">' + data.commentInfos[i].nickName + '</div>' +
                '         <div style="color: #606060;" class="public-font-twelve public-right">' + data.commentInfos[i].createTime + '</div>' +
                '          <p class="public-color-one" style="clear:both;">' + data.commentInfos[i].comment + '</p>' +
                '      </div>' +
                '   </div>' + temStr +
                '</div>';
        }
        $('#com-body').html(str);
        // }
    }

    $.ajax({
        url: 'http://www.taoshunda.com/api/interact/mobile/findReply',
        data: {
            trendId: getRequestParameters('trendId'),
            userId: 0
        },
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            if (data.res) {
                if (data.res.code == 40000) {
                    checkFun(data.res.data);
                } else {
                    alert('查询不到数据');
                }
            } else {
                alert('查询不到数据');
            }
        },
        error: function () {
            alert('查询');
        }
    });


</script>
</body>
</html>


